<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { findCategoryFilterAPI, findSubCategoryAPI, findSearchAPI } from '@/apis/category.js'
import GoodsItem from '../Home/components/GoodsItem.vue'
//# 获取面包屑导航数据
const categoryDate = ref({})
const route = useRoute() // useRoute 获取路由参数
// 定义请求函数
const getCategory = async () => {
  const res = await findCategoryFilterAPI(route.params.id)
  categoryDate.value = res.result
  //console.log('分类信息',res)
}
// 生命周期函数
onMounted(() => getCategory())

//# 获取商品列表数据
const goodsList = ref([])
const goodsData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortFiled: 'publishTime' // 默认按照时间排序
})
const getGoodsList = async () => {
  const res = await findSubCategoryAPI(goodsData.value)
  goodsList.value = res.result.items
  console.log('商品列表',res)
}
onMounted(() => getGoodsList())

//# 展示搜索列表数据
/*const searchData = ref({
  keyword: route.query.keyword,
  page: 1,
  pageSize: 20,
  sortFiled: 'publishTime' ,// 默认按照时间排序
  sortMethod: 'asc' // 正序
})
const getSearch = async () => {
  const res = await findSearchAPI(searchData.value)
  goodsList.value = res.result.items
  console.log('搜索参数',route.query.keyword)
  console.log('搜索商品列表',res)
  //getGoodsList()
}
onMounted(() => getSearch())*/

//# 点击筛选按钮 tab切换回调
const tabChange = () => {
  console.log('切换了',goodsData.value.sortFiled)
  goodsData.value.page = 1
  getGoodsList()
}

//# 滚动加载更多
const disabled = ref(false) // 默认开始禁用
const load = async () => {
  console.log('滚动了')
  // 获取下一页数据
  goodsData.value.page++
  const res = await findSubCategoryAPI(goodsData.value)
  // 新老数据拼接 老数据...展开 [...goodsList.value,...res.result.items]
  goodsList.value = [...goodsList.value,...res.result.items]
  // 加载完毕 停止滚动监听
  if(res.result.items.length === 0) {
    disabled.value = true
  }
}
</script>

<template>
  <div class="app-subcategory">
    <div class="container">
      <!--面包屑-->
      <div class="bread-group">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:`/category/${categoryDate.parentId}`}">{{categoryDate.parentName}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{categoryDate.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!--<div class="bread-item"><RouterLink to="/">首页</RouterLink></div>
        <i class="iconfont icon-angle-right"></i>
        <div class="bread-item"><RouterLink :to="`/category/${categoryDate.parentId}`">{{categoryDate.parentName}}</RouterLink></div>
        <i class="iconfont icon-angle-right"></i>
        <div class="bread-item"><RouterLink>{{categoryDate.name}}</RouterLink></div>-->
      </div>
      <!--产品-->
      <div class="sub-container">
        <el-tabs v-model="goodsData.sortFiled" @tab-change="tabChange">
          <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
          <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
          <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
        </el-tabs>
        <!--无限滚动加载效果 v-infinite-scroll="load"-->
        <!--停止无限滚动加载效果 :infinite-scroll-disabled="disabled"-->
        <div class="goods-group" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
          
          <div class="goods-cell" v-for="goods in goodsList" :key="goods.id">
            <GoodsItem :goods="goods"></GoodsItem>
          </div>
          
          <!--<p v-if="!disabled">加载中...</p>
          <p v-else>已经到底了</p>-->
          
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-subcategory{
  padding-bottom: 40px;
  .bread-group{
    display: flex;
    align-items: center;
    padding: 25px 0;
    .iconfont{
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px;
      line-height: 22px;
    }
    a:hover{
      color: $xtxColor;
    }
    :deep() {
      .el-breadcrumb__separator{
        font-family: monospace;
      }
    }
  }
  .sub-container{
    background-color: #fff;
    padding: 25px 40px 40px;
  }
  .goods-group{
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    .goods-cell{
      width: 25%;
      padding: 0 10px;
      margin-top: 20px;
      :deep() {
        .goods-item{
          background-color: #fff;
        }
        .extra{
          display: none;
        }
      }
    }
  }
}
</style>